---
name: useClickAway
route: /useClickAway
menu: 'Other'
edit: false
sidebar: true
---
import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';

# useClickAway

优雅的管理目标元素外点击事件的 Hook。

## 代码演示

<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='基础使用' description='请点击按钮或按钮外查看效果。'>
  <Demo1 />
</JackBox>

<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName='自定义 DOM' description='支持直接传入 DOM 对象或通过 function 返回一个对象的方式引入。'>
  <Demo2 />
</JackBox>

## API

```javascript
const ref = useClickAway(
  onClickAway: (event: KeyboardEvent) => void,
  dom?: RefType,
);
```

### Result

| 参数     | 说明                                     | 类型       |
|----------|------------------------------------------|------------|
| ref     | 当未传入任何参数时，将 ref 绑定给需监听的节点      | -        |

### Params

| 参数    | 说明                                         | 类型                   | 默认值 |
|---------|----------------------------------------------|------------------------|--------|
| onClickAway | 触发事件的函数  | (event) => void | -      |
| dom? | 可选项，如果未传入则会监听返回结果中的 ref，否则会监听传入的节点  | HTMLElement \| (() => HTMLElement) \| undefined | -      |